<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./../bootstrap/css/bootstrap.css">
  <style>
    .userphoto {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">

      <div class="col">
        <h1 class="header">医生管理：</h1>
        <div class="my-5" class="row">
          <div class="col py-3">
            <form class="form-inline">
              <div class="input-group mb-2 mr-sm-2">
                <button class="btn btn-success form-control" type="button" id="addJobBtn">添加医生</button>
              </div>

              <label class="sr-only" for="dname">医生姓名:</label>
              <input type="text" class="form-control mb-2 mr-sm-2" id="dname" placeholder="请输入医生姓名">

              <label class="sr-only" for="jname">职称：</label>
              <div class="input-group mb-2 mr-sm-2">
                <select name="jname" class="form-control" id="jname">
                  <option value="1">医生</option>
                  <option value="2">主治医生</option>
                </select>
              </div>
              <label class="sr-only" for="dsex">职称：</label>
              <div class="input-group mb-2 mr-sm-2">
                <select name="dsex" class="form-control" id="dsex">
                  <option value="0" disabled selected>请选择性别</option>
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>
              <div class="input-group mb-2 mr-sm-2">
                <button class="btn btn-primary form-control" type="button" id="searchBtn">查询</button>
              </div>

            </form>
          </div>
        </div>
        <div>
          <table class="table table-hover table-bordered">
            <thead>
              <tr>
                <th>序号</th>
                <th>医生姓名</th>
                <th>职称名称</th>
                <th>性别</th>
                <th>身份证</th>
                <th>电话</th>
                <th>特长</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="doctorTable">
              <tr>
                <td>序号</td>
                <td>医生姓名</td>
                <td>主治医生</td>
                <td>性别</td>
                <td>身份证</td>
                <td>电话</td>
                <td>特长</td>
                <td>操作</td>
              </tr>

            </tbody>
          </table>
        </div>
        <!-- 分页 -->
        <div id="myPage">
          <nav>
            <ul class="pagination pagination-sm">
              <li class="page-item active" aria-current="page">
                <span class="page-link">1</span>
              </li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
            </ul>
            <select name="page" id="page">
              <!-- <option value="5">5</option> -->
            </select>
          </nav>
        </div>
        <!--  搜索的分页 -->
        <div id="myPage2">
          <nav>
            <ul class="pagination pagination-sm">
              <!-- <li class="page-item active" aria-current="page">
                <span class="page-link">1</span>
              </li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li> -->
            </ul>
            <select name="page" id="page2">
              <!-- <option value="5">5</option> -->
            </select>
          </nav>
        </div>
      </div>
    </div>
  </div>

</body>
<script src="./../jquery/jquery 3.6.4.js"></script>
<script src="./../bootstrap/js/bootstrap.bundle.js"></script>

<script>
  let nowpage = 1, pagesize = 5, total = 0;

  window.onload = function () {
    // console.log($.ajax);

    $.ajax({
      url: "/getJobs",
      type: 'get',
      success: function (res) {
        console.log(res)
        if (res.code === 200) {
          let jname = $('#jname');
          jname.html('');
          let strHtml = '<option value="0" disabled selected>请选择职称</option>';

          res.data.forEach(el => {
            strHtml += `<option value="${el.jid}">${el.jname}</option>`;
          });
          jname.html(strHtml);
        }

      }
    })
  }
  // 案例： 多条件查询

  const searchHandler = (nowpage, pagesize) => {
    let dname = $("#dname").val().trim();
    let jid = $("#jname").val();
    let dsex = $("#dsex").val();
    // console.log(dname, jname, dsex)

    if (!dname && !jid && !dsex) {
      alert('不能输入空格！请输入或选择一个查询条件')
      return;
    }

    $.ajax({
      url: '/searchDoctors',
      type: 'get',
      data: { dname, jid, dsex, nowpage, pagesize },
      success(res) {
        console.log(res)
        let doctorTable = $("#doctorTable")
        doctorTable.html('');
        let trHtml = "";
        res.data.forEach((el, index) => {
          trHtml += `<tr>
                <td>${index + 1}</td>
                <td>${el.dname}</td>
                <td>${el.jname}</td>
                <td>${el.dsex}</td>
                <td>${el.dsid}</td>
                <td>${el.dtel}</td>
                <td>${el.dfeaturs}</td>
                <td>
                  <button type="button" data-id="${el.did}" class="btn btn-sm btn-info btn-look">查看</button>
                  <button type="button" data-id="${el.did}" class="btn btn-sm btn-warning btn-edit">编辑</button> 
                  <button type="button" data-id="${el.did}" class="btn btn-sm btn-danger btn-delete">删除</button>   
                </td>
              </tr>`;
        })
        doctorTable.html(trHtml);

        // 分页：
        $("#myPage").hide()
        $("#myPage2").show()

        // 分页的动态渲染


      }

    })



  }

  $("#searchBtn").on('click', function () {
    searchHandler(nowpage, pagesize)
  });


</script>

</html>